<template>
	<view>
		<view class="head">
			<i class="iconfont iconjiaoyichenggong"></i>
			<view class="head-status-title">交易成功</view>
		</view>
		<view class="area" v-if="detail.is_pad == 1">
			<view class="myInfo">{{detail.name ? detail.name : '未设置收货人名称'}}<text>{{detail.phone ? detail.phone:'未知电话'}}</text></view>
			<view class="address">{{detail.address ? detail.address :'未知地址'}}</view>
		</view>
		<view class="cont">
			<image :src="detail.charge_image" mode="widthFix"></image>
			<view>
				<view class="name">{{detail.member_card_name}}</view>
				<view class="price">￥{{detail.charge_all_cion}}</view>
			</view>
		</view>
		<view class="priceInfo">
			<view><view class="price-title">商品金额：</view><text>￥{{detail.charge_all_cion}}</text></view>
			<view v-if="detail.isDiscount"><view class="price-title">优惠金额：</view><text>￥{{detail.activity_cion}}</text></view>
			<view class="result"><view class="price-title">实付金额：</view><text>￥{{detail.payCion}}</text></view>
		</view>
		<view class="orderInfo">
			<view class="orderTitle">订单信息</view>
			<view class="orderDetail">
				<view><text>订&nbsp;&nbsp;单 号:</text>{{detail.charge_order_sn}}</view>
				<view><text>购买天数:</text>{{detail.charge_all_day_num}}天</view>
				<view><text>学　　科:</text>{{detail.subject_string}}</view>
				<view><text>会员权益:</text>{{detail.equities_name}}</view>
				<view><text>下单时间:</text>{{detail.time}}</view>
				<view><text>支付金额:</text>￥{{detail.payCion}}</view>
				<view v-if="detail.pad_describe"><text>备　　注</text>{{detail.pad_describe}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/common/util.js'
	export default{
		data() {
			return {
				unid: '', //订单ID
				detail: {},
				newTime: Date.parse(new Date())/1000
			}
		},
		onLoad(e) {
			this.unid = e.unid;
			this.getDetail();
		},
		methods: {
			getDetail() {
				this.$mapi.apiPost('api/v1/mobile/member/card/order/info/'+this.unid,{unid:this.unid}).then(res=>{
					if (res.data.code == 200) {
						this.detail = res.data.data;
						this.detail.time = util.getFormatTime(this.detail.create_time);
						this.detail.payCion = Number(this.detail.charge_all_cion - this.detail.activity_cion); //实付金额
						this.detail['isDiscount'] = false;
						// 判断当前是否在活动期内
						if(this.detail.activity_start_time && this.detail.activity_end_time) {
							if(this.newTime >= this.detail.activity_start_time && this.newTime <= this.detail.activity_end_time) {
								this.detail['isDiscount'] = true;
							}
						}
						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FAFAFA;
	}
	/* 顶部 */
	.head {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 120upx;
		color: #FFFFFF;
		background-color: #FF9900;
		font-size: 38upx;
		& i{
			font-size: 50upx;
		}
		.head-status-title {
			margin-left: 16upx;
			font-size: 38upx;
		}
	}
	/* 地址 */
	.area{
		padding: 26upx 30upx;
		background-color: #FFFFFF;
		margin-bottom: 20upx;
		.myInfo{
			color: #333333;
			font-size: 34upx;
			font-weight: 500;
			& text {
				margin-left: 40upx;
			}
		}
		.address{
			color: #999999;
		}
	}
	/* 产品信息 */
	.cont{
		display: flex;
		align-items: flex-start;
		padding: 40upx 30upx;
		background-color: #FFFFFF;
		& image{
			width: 35%;
			height: 160upx;
			margin-right: 20upx;
		}
		& view{
			.name{
				color: #333333;
				font-size: 34upx;
				font-weight: 500;
			}
			.price{
				color: #333333;
				font-size: 32upx;
			}
		}
	}
	/* 价格详情 */
	.priceInfo{
		padding: 30upx;
		background-color: #FFFFFF;
		margin-top: 20upx;
		& view {
			display: flex;
			justify-content: space-between;
			align-items: center;
			& text {
				color: #333333;
				font-size: 32upx;
			}
			.price-title{
				color: #999999;
				font-size: 34upx;
			}
		}
		.result{
			margin-top: 30upx;
			padding-top: 10upx;
			border-top: 2upx solid #E5E5E5;
			& text {
				color: #FF7171;
			}
			.price-title{
				color: #333333;
				font-size: 30upx;
			}
		}
	}
	/* 订单详情 */
	.orderInfo{
		padding: 10upx 30upx 30upx;
		background-color: #FFFFFF;
		margin-top: 20upx;
		.orderTitle{
			color: #333333;
			font-size: 36upx;
			padding: 10upx 0;
			border-bottom: 2upx solid #E5E5E5;
		}
		.orderDetail {
			margin-top: 20upx;
			& view {
				display: flex;
				min-height: 70upx;
				color: #666666;
				font-size: 34upx;
				& text{
					white-space: nowrap;
					margin-right: 16upx;
				}
			}
		}
	}
</style>
